<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>自适应示例 | Bootstrap</title>
  <!-- 引入网页图标 -->
  <link rel="icon" href="./favicon.ico">
  <!-- 引入bootstrap css -->
  <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
  <!-- 引入bootsrap图标 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="css/animate.css">
  <!-- 引入首页css文件 -->
  <link rel="stylesheet" href="css/index.css">
</head>
<script src="js/wow.js"></script>

<body>
  <!-- 顶部导航栏制作 -->
  <nav class="navbar navbar-expand-lg fixed-top" data-bs-theme="dark">
    <div class="container">
      <a class="navbar-brand" href="#">vivo</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
        aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">

        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">智能手机</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">智能生态</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">云服务</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">会员中心</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">支持</a>
          </li>
        </ul>
        <div class="icons">
          <a href="#"><i class="bi bi-search"></i></a>
          <a href="#"><i class="bi bi-person"></i></a>
        </div>
      </div>
    </div>
  </nav>

  <!-- 轮播图制作 -->
  <section class="banner wow zoomIn">
    <div id="carouselExampleCaptions" class="carousel slide">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
          aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
          aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
          aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./img/banner1.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>vivo X200s 影像旗舰</h5>
            <p>拍照更专业，视频更清晰，影像更逼真</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="./img/banner2.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>vivo X200s 影像旗舰</h5>
            <p>拍照更专业，视频更清晰，影像更逼真</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="./img/banner3.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>vivo X200s 影像旗舰</h5>
            <p>拍照更专业，视频更清晰，影像更逼真</p>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </section>

  <!-- 热门产品模块 -->
  <section class="hot-product py-5 wow fadeInUp">
    <div class="container">
      <h2 class="text-center fw-bold display-4 text-white">热门产品</h2>
      <p class="text-center mt-3 fs-6 info">探索vivo最新科技产品</p>
      <div class="row mt-5 row-cols-auto row-cols-1 row-cols-md-2 row-cols-lg-4">
        <div class="col">
          <div class="card">
            <div class="card-img">
              <img src="./img/pic1.webp" class="card-img-top" alt="...">
            </div>
            <div class="card-body">
              <h5 class="card-title fw-semibold">vivo v50</h5>
              <p class="card-text">纤薄设计，卓越人像摄影体验</p>
              <p class="price fw-semibold">￥1244</p>
              <a href="#" class="btn primary">立即购买</a>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <div class="card-img">
              <img src="./img/pic2.jpg" class="card-img-top" alt="...">
            </div>
            <div class="card-body">
              <h5 class="card-title fw-semibold">vivo v50</h5>
              <p class="card-text">纤薄设计，卓越人像摄影体验</p>
              <p class="price fw-semibold">￥1244</p>
              <a href="#" class="btn primary">立即购买</a>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <div class="card-img">
              <img src="./img/pic3.jpg" class="card-img-top" alt="...">
            </div>
            <div class="card-body">
              <h5 class="card-title fw-semibold">vivo v50</h5>
              <p class="card-text">纤薄设计，卓越人像摄影体验</p>
              <p class="price fw-semibold">￥1244</p>
              <a href="#" class="btn primary">立即购买</a>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <div class="card-img">
              <img src="./img/pic2.jpg" class="card-img-top" alt="...">
            </div>
            <div class="card-body">
              <h5 class="card-title fw-semibold">vivo v50</h5>
              <p class="card-text">纤薄设计，卓越人像摄影体验</p>
              <p class="price fw-semibold">￥1244</p>
              <a href="#" class="btn primary">立即购买</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 未来科技制作 -->
  <section class="future-tech py-5">
    <div class="container py-5 position-relative wow fadeInUp">
      <h2 class="text-center fw-bold display-4 text-white">未来科技</h2>
      <p class="text-center mt-3 fs-6 info">探索vivo最新科技产品</p>
      <div class="row mt-5 row-cols-auto row-cols-1 row-cols-md-2 row-cols-lg-3">
        <div class="col">
          <i class="bi bi-camera future-icon"></i>
          <h3 class="future-title">AI影像系统</h3>
          <p class="future-desc">基于AI技术的智能影像处理系统，提供更专业的影像效果</p>
        </div>
        <div class="col">
          <i class="bi bi-lightning-charge future-icon"></i>
          <h3 class="future-title">200W快充技术</h3>
          <p class="future-desc">9分钟充满5000mAh电池，告别电量焦虑</p>
        </div>
        <div class="col">
          <i class="bi bi-cpu future-icon"></i>
          <h3 class="future-title">自研芯片V3</h3>
          <p class="future-desc">性能提升40%，功耗降低30%，极致体验</p>
        </div>
        <div class="col">
          <i class="bi  bi-display future-icon"></i>
          <h3 class="future-title">E6 AMOLED屏</h3>
          <p class="future-desc">2K分辨率，2000nit峰值亮度，自适应刷新率</p>
        </div>
        <div class="col">
          <i class="bi bi-battery-full future-icon"></i>
          <h3 class="future-title">智能续航系统</h3>
          <p class="future-desc">AI智能调度，续航提升25%，使用更持久</p>
        </div>
        <div class="col">
          <i class="bi bi-shield-check future-icon"></i>
          <h3 class="future-title">隐私保护</h3>
          <p class="future-desc">全方位隐私保护系统，确保数据安全</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 底部导航部分 -->
  <footer class="footer">
    <div class="container wow fadeInUp">
      <!-- row-cols-auto row-cols-1 row-cols-md-2 row-cols-lg-3 -->
      <div class="row row-cols-auto row-cols-1 row-cols-md-2 row-cols-xl-4">
        <dl class="col">
          <dt>产品系列</dt>
          <dd><a href="#">X系列</a></dd>
          <dd><a href="#">Y系列</a></dd>
          <dd><a href="#">折叠屏系列</a></dd>
          <dd><a href="#">智能配件</a></dd>
        </dl>
         <dl class="col">
          <dt>产品系列</dt>
          <dd><a href="#">X系列</a></dd>
          <dd><a href="#">Y系列</a></dd>
          <dd><a href="#">折叠屏系列</a></dd>
          <dd><a href="#">智能配件</a></dd>
        </dl>
         <dl class="col">
          <dt>产品系列</dt>
          <dd><a href="#">X系列</a></dd>
          <dd><a href="#">Y系列</a></dd>
          <dd><a href="#">折叠屏系列</a></dd>
          <dd><a href="#">智能配件</a></dd>
        </dl>
         <dl class="col">
          <dt>联系我</dt>
          <dd><a href="#">电话：15284603694</a></dd>
          <dd><a href="#">邮箱：1039004739@qq.com</a></dd>
        </dl>
      </div>
      <div class="copyright text-center py-3">
        <p>&copy; 2025 dingding 版权所有 | 粤ICP备2021000000号</p>
      </div>
    </div>
  </footer>
  <!-- 引入Bootstrap JS（部分组件需要） -->
  <script src="bootstrap/bootstrap.min.js"></script>
  <script>
  new WOW().init();
</script>
</body>

</html>